<template>
  <div class='doubanlist'>
    <!-- 豆瓣榜单 -->
    <van-grid :border="false" :column-num="2">
      <van-grid-item
        v-for="item in info"
        :key="item.id"
        :to="{ name: 'Detail', params: { id: item.id } }"
      >
        <div class="pic">
          <van-image :src="item.images.small" />
          <van-icon name="like-o" />
        </div>
        <div class="info">
          <div class="title">
            {{ item.title }}
          </div>
          <div class="rate">
            <van-rate
              :value="(item.rating.average * 5) / 10"
              :size="10"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
              allow-half
            />
            <span>
              {{ item.rating.average }}
            </span>
          </div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getWeekly, getTop250 } from '@/api/home'

export default {
  name: 'Doubanlist',
  data () {
    return {
      title: this.$route.params.title === '豆瓣周榜',
      info: [],
    }
  },
  methods: {},
  computed: {},
  components: {},
  created () {
    if (this.title) {
      getWeekly()
        .then((res) => {
          // console.log(res)
          res.subjects.forEach(item => {
            return this.info.push(item.subject)
          })
          // console.log(this.info)
          // console.log('this.weekly', this.weekly)
        })
        .catch(console.log)
    } else {
      getTop250(this.start, this.count)
        .then((res) => {
          // console.log(res)
          this.info = res.subjects
          // console.log(this.title)
          // console.log('this.top', this.top)
        })
        .catch(console.log)
    }
  },
}
</script>

<style lang='less' scoped>
.doubanlist {
  .van-grid-item {
    /deep/ &>div {
      border-radius: 15px;
    }
    .pic {
      position: relative;
      border-radius: 15px !important;
      .van-icon {
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(0,0,0,0.3);
        color: #fff;
        font-size: 24px;
      }
    }
    .info {
      display: flex;
      width: 100%;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      .rate {
        display: flex;
        align-items: center;
        * {
          margin: 2px 4px;
        }
      }
    }
  }
}
</style>
